<template>
  <div class="containner">
    <div class="main-area">
      <!-- 1111111111111 -->
      <div class="header">
        <div class="left-box">
          <div class="toggele-btn">
            <i class="el-icon-edit-outline"></i>
          </div>
          <input
            type="text"
            v-model="titleAndCity"
            class="title-input"
            placeholder="输入标题+城市..."
          />
        </div>
        <div class="right-box">
          <button class="xitu-btn" @click="postArticle">发布</button>
          <div class="toggele-btn">
            <i class="el-icon-more-outline"></i>
          </div>
          <div class="toggle-btn"></div>
        </div>
      </div>

      <!-- 引入 markdown 编辑器 -->
      <div class="mavonEditor">
        <no-ssr>
          <mavon-editor
            style="height: 650px"
            :toolbars="markdownOption"
            v-model="mdContent"
            ref="md"
            @imgAdd="imgAdd"
          />
        </no-ssr>
      </div>
    </div>
  </div>
</template>

<script>
// import MavonEditor from "@/components/post/mavonEditor";
import marked from "marked";

export default {
  components: {
    // MavonEditor
  },
  data() {
    return {
      titleAndCity: "",
      // markdown
      markdownOption: {
        // font-size: 15px,
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      mdContent: ""
    };
  },

  methods: {
    // 发布文章
    postArticle() {
      // console.log(this.mdContent);

      // console.log(html);

      // console.log(this.titleAndCity);
      if (this.titleAndCity.indexOf("+") == -1) {
        this.$message.warning("请检查格式是否为 标题+地点 ");
        return;
      } else if (
        this.titleAndCity.indexOf("+") ==
        this.titleAndCity.length - 1
      ) {
        this.$message.warning("必须输入城市");
        return;
      }

      var arr = this.titleAndCity.split("+");
      var title = arr[0];
      var city = arr[1];
      console.log(this.mdContent);
      // 将 md 转换为 html
      let converter = new showdown.Converter();
      let content = converter.makeHtml(this.mdContent);

      console.log("here is content : ");
      console.log(content);

      var url = "/posts";
      var that = this;
      // 新增文章
      this.$axios({
        url,
        method: "POST",
        headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
        },
        data: {
          content,
          title,
          city
        }
      }).then(res => {
        console.log(res);
        // 成功提示
        this.$message({
          message: "发布文章成功！",
          type: "success"
        });
        // 跳转到首页
        setTimeout(() => {
          this.$router.replace("/post");
        }, 1000);
      });
    },

    // 绑定@imgAdd event
    imgAdd(pos, $file) {
      // console.log("imgAdd2");
      // console.log(pos);
      // console.log($file);
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("files", $file);
      var that = this;
      this.$axios({
        url: "/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(res => {
        console.log(res);
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        console.log(res.data[0].url);
        let url = `http://157.122.54.189:9095${res.data[0].url}`;
        console.log(url);
        that.$refs.md.$img2Url(pos, url);
      });
    }
  }
};
</script>

<style lang="less">
@deep: ~">>>";

.mavonEditor {
  width: 100%;
  height: 100%;
  margin: 2px 0 0 0;
}

.header {
  button,
  input {
    overflow: visible;
  }
  display: flex;
  padding: 0 50px;
  height: 5.334rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 100;
  .left-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .toggele-btn {
      width: 2.334rem;
      height: 2.334rem;
      cursor: pointer;
      padding: 15px 0 0 15px;

      // @{deep} .el-icon-edit-outline {
      //   width: 100px;
      //   height: 100px;
      // }
    }

    .title-input {
      margin: 0;
      padding: 0;
      font-size: 24px;
      font-weight: 500;
      color: #1d2129;
      border: none;
      outline: none;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      height: 100%;
    }
  }
  .right-box {
    display: flex;
    align-items: center;
    padding: 0 0 0 25rem;

    .toggle-btn {
      font-size: 3rem;
      line-height: 1;
      vertical-align: middle;
      color: #909090;
      cursor: pointer;
      border-radius: 2px;
    }

    .xitu-btn {
      // font-size: 3rem;
      margin: 0 20px 0 0;
      height: 38px;
      padding: 2px 20px;
      font-size: 14px;
      line-height: 22px;
      border: 1px solid #fff;
      border-radius: 2px;
      cursor: pointer;
      color: #fff;
      background-color: #1d7dfa;
    }

    .toggle-btn {
      margin: 0 0 0 20px;
      width: 2.667rem;
      height: 2.667rem;
      border-radius: 50%;
      background-color: #eee;
      background-position: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      cursor: pointer;
    }

    button:focus {
      outline: none;
    }
  }
}

.containner {
  background-color: #f4f5f5;
  // display: block;
}
.main-area {
  width: 1150px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 0 20px 0;
  // margin-top: 1.767rem;
  // padding: 2rem;
  // height: 600px;
}
</style>
